@model IEnumerable<PersonResponse>
@{
    ViewBag.Title = "Persons";
}

<form action="/persons/index" method="get">
 <h1>Persons</h1>

 <a href="/persons/create">Create Person</a>

 <div class="box flex">
  <div class="flex-1">
   <select class="form-input" name="searchBy">
    @foreach (var field in ViewBag.SearchFields)
    {
     if (field.Key == ViewBag.CurrentSearchBy)
     {
      <option value="@field.Key" selected="selected">@field.Value</option>
     }
     else
     {
      <option value="@field.Key">@field.Value</option>
     }

    }
    @* Eg: searchBy=PersonName&searchString=abc *@
   </select>
  </div>

  <div class="flex-1">
   <input type="search" id="Search" class="form-input" placeholder="Search" name="searchString" value="@ViewBag.CurrentSearchString" />
  </div>

  <div class="flex-1">
   <button class="button button-blue-back">Search</button>
   <a href="~/persons/index" class="link-hover">Clear all</a>
  </div>
 </div>


 <table class="table w-100 mt">
  <thead>
   <tr>
    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.PersonName) },
    { "DisplayName", "Person Name" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.Email) },
    { "DisplayName", "Email" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.DateOfBirth) },
    { "DisplayName", "Date of Birth" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.Age) },
    { "DisplayName", "Age" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.Gender) },
    { "DisplayName", "Gender" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.Country) },
    { "DisplayName", "Country" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.Address) },
    { "DisplayName", "Address" },
    })

    @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
    { "ColumnName", nameof(PersonResponse.ReceiveNewsLetters) },
    { "DisplayName", "Receive News Letters" },
    })

   </tr>
  </thead>
  <tbody>
   @foreach (PersonResponse person in Model)
   {
    <tr>
     <td style="width:15%">@person.PersonName</td>
     <td style="width:20%">@person.Email</td>
     <td style="width:13%">@person.DateOfBirth?.ToString("dd MMM yyyy")</td>
     <td style="width:9%">@person.Age</td>
     <td style="width:9%">@person.Gender</td>
     <td style="width:10%">@person.Country</td>
     <td style="width:15%">@person.Address</td>
     <td style="width:20%">@person.ReceiveNewsLetters</td>
    </tr>
   }
   <tr></tr>
  </tbody>

 </table>
</form>